<!-- 预约成功 -->
<template>
	<view class="appointmentSuccessContainer">
		<view class="appointmentBox flex">
			<image src="../../static/images/successIcon.png" class="successIcon"></image>
			<view class="successTxt">预约成功</view>
		</view>
		<view class="appointmentInfoBox">
			<view class="appointmentItem flex">
				<view class="appointmentLabel">预约教室: </view>
				<view class="appointmentTxt">{{classroomName}}</view>
			</view>
			<block v-if="flag == 1">
				<view class="appointmentItem flex">
					<view class="appointmentLabel">教室位置: </view>
					<view class="appointmentTxt">{{location}}</view>
				</view>
			</block>
			<view class="appointmentItem flex">
				<view class="appointmentLabel">预约时间: </view>
				<view class="appointmentTxt">{{time}} {{week}}</view>
			</view>
		</view>
		<view class="btnBox flex">
			<button type="primary" class="btnHandler" @click="jumpPage(1)">查看预约</button>
		<!-- 	<button type="primary" class="btnHandler" @click="jumpPage(2)">继续预约</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: 1,//是否展示教室位置 1否2是
				classroomName: '',
				location:'',
				time: '',
				week: '',
				orderId: '',
				// laboratoryId: ''
			}
		},
		onLoad(options) {
			this.flag = options.flag;
			this.classroomName = options.name;
			this.time = options.time;
			this.orderId = options.orderId;
			// this.laboratoryId = options.laboratoryId;
			let weekIdx = new Date(options.time).getDay();
			this.week = "周" + "日一二三四五六".charAt(weekIdx);//['周一','周','周一','周一','周一','周一','周一'];
			if(options.flag == 1) {
				this.location = options.location;
			}
		},
		onShow() {
			
		},
		methods: {
			jumpPage(flag) {
				if(flag == 1) {//查看预约
					let _this = this;
					uni.redirectTo({
						url: '/pages/appointmentInfo/appointmentInfo?orderId='+_this.orderId,
					});
				}else{//继续预约
					/* uni.redirectTo({
						url: '/pages/classroom/classroom?laboratoryId='+_this.laboratoryId,
					}); */
					uni.removeStorageSync('orderId');
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}
			}
		}
	}
</script>

<style>
	.appointmentSuccessContainer {
		width: 100%;
		height: 100vh;
		background: #F6F6F6;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.appointmentBox {
		width: 100%;
		height: 380rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/successBg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.successIcon {
		width: 150rpx;
		height: 150rpx;
		margin-left: 220rpx;
		margin-top: 100rpx;
	}
	.successTxt {
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 346rpx;
		margin-left: 10rpx;
	}
	.appointmentInfoBox {
		width: 93%;
		height: 350rpx;
		background-image: url("https://t.acoer.cn/guoshiBgImg/successBg2.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: -80rpx;
		padding: 87rpx 24rpx 0 24rpx;
	}
	.appointmentItem {
		margin: 0 24rpx 49rpx 24rpx;
	}
	.appointmentLabel {
		font-size: 30rpx;
		color: #666666;
	}
	.appointmentTxt {
		font-size: 30rpx;
		color: #222222;
		margin-left: 20rpx;
	}
	.btnBox {
		width: 100%;
		position: fixed;
		bottom: 5%;
	}
	.btnHandler {
		width: 40%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;	
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		/* margin-left: 5%; */
	}
</style>
